import React, { Component } from 'react'
import { Button, Input, Select } from 'antd';

export default class Count extends Component {
  state = {
    count: 0,
    selectNum: 1
  }
  // 加
  increment = () => {
    const { count, selectNum } = this.state
    this.setState({ count: count + selectNum })
  }
  // 减
  decrement = () => {
    const { count, selectNum } = this.state
    this.setState({ count: count - selectNum })
  }
  // 奇数加
  incrementIfOdd = () => {
    const { count, selectNum } = this.state
    if (count % 2 !== 0) {
      this.setState({ count: count + selectNum })
    }
  }
  // 异步加
  incrementAsync = () => {
    const { count, selectNum } = this.state
    setTimeout(() => {
      this.setState({ count: count + selectNum })
    }, 500);
  }
  // 下拉数据改变
  handleChange = (val) => {
    this.setState({ selectNum: val })
  }
  render() {
    const { count,selectNum } = this.state
    return (
      <div style={{ padding: '10px' }}>
        <div>
          <span>当前求和为：</span><Input value={count} style={{ width: 200 }} placeholder="" />
        </div>
        <br />
        <Select
          value={selectNum}
          style={{
            width: 200,
            padding: '5px 0',
            marginRight: 5
          }}
          onChange={this.handleChange}
          options={[
            {
              value: 1,
              label: '1',
            },
            {
              value: 2,
              label: '2',
            },
            {
              value: 3,
              label: '3',
            }
          ]}
        />
        <Button onClick={this.increment} type="primary" style={{ marginRight: '5px' }}> + </Button>
        <Button onClick={this.decrement} style={{ marginRight: '5px' }}> - </Button>
        <Button onClick={this.incrementIfOdd} style={{ marginRight: '5px' }} type="dashed">奇数加</Button>
        <Button onClick={this.incrementAsync} style={{ marginRight: '5px' }} type="dashed">异步加</Button>
      </div>
    )
  }
}
